<template>
  <div class="zdk">
    <!-- 标题 -->
    <div class="zdk-title">
      <svg
        t="1584086537030"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2048"
        width="16"
        height="16"
        v-if="location"
      >
        <path
          d="M513.124 274.743c-51.148 0-92.762 41.614-92.762 92.762 0 51.152 41.614 92.766 92.762 92.766 51.152 0 92.766-41.614 92.766-92.766 0-51.148-41.614-92.762-92.766-92.762z"
          fill="#d81e06"
          p-id="2049"
        />
        <path
          d="M811.228 376.612c0-166.414-135.385-301.8-301.8-301.8s-301.8 135.385-301.8 301.8h0.634c-0.058 2.413-0.184 4.808-0.184 7.234 0 143.801 203.439 427.699 280.069 541.194l21.281 23.334 21.286-23.334c76.625-105.587 280.059-397.407 280.059-541.194 0-2.426-0.126-4.821-0.183-7.234h0.638zM509.427 518.963c-80.116 0-145.295-65.183-145.295-145.299s65.179-145.295 145.295-145.295 145.299 65.179 145.299 145.295-65.183 145.299-145.299 145.299z"
          fill="#d81e06"
          p-id="2050"
        />
      </svg>
      {{title}}
      <svg
        t="1584089649216"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="5143"
        width="16"
        height="16"
        v-if="arrow"
      >
        <path
          d="M507.8 727.728a30.016 30.016 0 0 1-21.288-8.824L231.104 463.496a30.088 30.088 0 0 1 0-42.568 30.088 30.088 0 0 1 42.568 0l234.128 234.128 234.16-234.128a30.088 30.088 0 0 1 42.568 0 30.088 30.088 0 0 1 0 42.568L529.08 718.904a30 30 0 0 1-21.28 8.824z"
          fill="#888888"
          p-id="5144"
        />
      </svg>
    </div>
    <!-- 内容 -->
    <div class="zdk-content">
      <!--
          问：如何向组件中传复杂的HTML结构？
          插槽：
              具名插槽 （组件中有多个插槽）：    <slot name="xxx"></slot>
              匿名插槽 （组件中只有一个插槽）：   <slot></slot>
      -->
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  // 定义属性
  props: {
    // 是否显示位置图标
    location: {
      type: Boolean,
      default: false
    },
    arrow: {
      type: Boolean,
      default: false
    },
    // 标题
    title: {
      type: String,
      required: true // 属性必填
    }
  }
};
</script>

<style lang="scss">
.zdk {
  display: inline-block;
  &:hover {
    .zdk-title {
      background-color: #fff;
      border-color: #ccc;
      position: relative;
      // 创建一条线覆盖上边框
      &::after {
        content: "";
        position: absolute;
        left: 0;
        display: block;
        width: 100%;
        height: 2px;
        background-color: #fff;
        z-index: 9999;
      }
    }
    .zdk-content {
      display: block;
    }
  }
  &-title {
    padding: 0 10px;
    height: 35px;
    line-height: 35px;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
  }
  &-content {
    position: absolute;
    display: none;
    padding: 10px;
    border: 1px solid #ccc;
    background: #fff;
    z-index: 99;
  }
}
</style>